<template>
    <div>
        <!--导航栏-->
        <div style="position: fixed;z-index: 10;width: 100%">
            <van-nav-bar  :title="title" left-text="" :left-arrow="true" @click-left="onClickLeft()">
                <template #right>
                    <van-icon name="search" size="18" />
                </template>
            </van-nav-bar>
        </div>
        <div style="height: 50px"></div>


        <!--店家卡片-->
        <van-card :title="store.name"
                  :thumb="store.pic"
                  :desc="store.detail"
        >
            <template #price-top>
                销量：{{ store.sell }}
            </template>
        </van-card>

        <!--分割线-->
        <van-divider />

        <!--主体内容-->
        <van-row>
            <van-col span="4">
                <!--侧边栏-->
                <van-sidebar v-model="activeKey" @change="onChange">
                    <van-sidebar-item title="热销" />
                    <van-sidebar-item title="必点项" />
                </van-sidebar>
            </van-col>
            <van-col span="20">
                <!--菜样-->
                <div v-for="(food,index) in foods">
                    <van-card :title="food.name"
                              :thumb="food.pic"
                              :desc="food.detail"
                              :price="food.price"
                    >
                        <template #footer>
                            <van-button class="btn" round size="mini" type="info" @click="add(food.id,food.name,food.price,food.pic)">+</van-button>
                        </template>
                    </van-card>
                </div>
            </van-col>
        </van-row>

        <div style="height: 50px"></div>

        <!--底部 购物车 立刻购买-->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" @click="onService" />
            <van-goods-action-icon icon="cart-o" text="购物车" @click="onShoppingCar" :badge="badge"/>
            <van-goods-action-button
                    type="danger"
                    text="立即购买"
                    @click="onBuy"
            />
        </van-goods-action>

        <!--购物车 下方弹窗-->
        <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" >
            <div id="itemTitle">
                <van-row>
                    <van-col span="8">name</van-col>
                    <van-col span="2" offset="1">num</van-col>
                    <van-col span="2" offset="2">price</van-col>
                </van-row>
            </div>
            <div id="item" v-for="cFood in cFoods">
                <van-row>
                    <van-col span="8">{{ cFood.name }}</van-col>
                    <van-col span="2" offset="1">{{ cFood.num }}</van-col>
                    <van-col span="2" offset="2">{{ cFood.price }}</van-col>
                    <van-col span="2" offset="1"><van-button class="btn" round size="mini" type="info" @click="onDelete(cFood.id)">-</van-button></van-col>
                    <van-col span="2" offset="1"><van-button class="btn" round size="mini" type="info" @click="add(cFood.id)">+</van-button></van-col>
                    <van-col span="2" offset="1"><van-button class="btn" round size="mini" type="info" icon="delete" @click="onClear(cFood.id)"></van-button></van-col>
                </van-row>
            </div>
            <div align="right">
                总计：{{ totalPrice }}
            </div>
        </van-popup>


    </div>
</template>

<script>
    export default {
        name: "Store",
        data(){
            return {
                store:{
                    id: "0",
                    userId: "",
                    name: "他城有家",
                    detail: "detail",
                    sell: 5000,
                    pic: ""
                },
                activeKey: 0,
                foods: [],//
                // badge: '',
                show: false,
                cFoods: [],//id,name,num,price,pic
                totalPrice: 0,
            }
        },
        computed:{
            title(){
                return this.store.name;
            },
            badge(){
                let n = 0;
                for (let cf of this.cFoods) {
                    n += cf.num;
                }
                return n;
            }
        },
        methods:{
            onClickLeft() {
                this.$store.state.cFoods = [];
                this.$router.replace('/home');
            },
            onChange(){
                // console.log(this.activeKey);
                if(this.activeKey == 0){
                    axios.post("/hotSale",{
                        userId: this.$store.state.userId
                    }).then(res=>{
                        // console.log(res);
                        this.foods = res.data;
                    })
                } else if(this.activeKey == 1){
                    axios.post("/mustGood",{
                        userId: this.$store.state.userId
                    }).then(res=>{
                        // console.log(res);
                        this.foods = res.data;
                    })
                }

            },
            add(id,name,price,pic){
                let flag = 0;
                for (let cFood of this.cFoods) {
                    if(cFood.id === id){
                        cFood.price = this.addNum(cFood.price, cFood.price/cFood.num) ;
                        cFood.num++;
                        flag = 1;
                    }
                }
                if(flag === 0){
                    let cFood = {
                        pic,
                        id,
                        name,
                        price,
                        num: 1,
                    };
                    this.cFoods.push(cFood);
                }

                this.calculatePrice();

            },
            onService(){
                console.log('呼叫客服')
            },
            onShoppingCar() {
                this.show= true;
            },
            onBuy(){
                console.log(this.cFoods);
                this.$store.state.store = this.store;
                this.$store.state.cFoods = this.cFoods;
                this.$router.push('/order');
            },
            onDelete(id){
                for (let index in this.cFoods) {
                    if(this.cFoods[index].id === id){
                        this.cFoods[index].price = this.delNum(this.cFoods[index].price,this.cFoods[index].price/this.cFoods[index].num);
                        // this.cFoods[index].price = Math.floor(this.cFoods[index].price);
                        this.cFoods[index].num--;
                    }
                    if(this.cFoods[index].num === 0){
                        this.cFoods.splice(index,1);
                    }
                }

                this.calculatePrice();

            },
            onClear(id){
                let delNum;
                for (let index in this.cFoods) {
                    if(this.cFoods[index].id === id){
                        delNum = this.cFoods[index].num;
                        this.cFoods.splice(index,1);
                    }
                }
                this.calculatePrice();
            },
            calculatePrice(){
                this.totalPrice = 0;
                for (let cFood of this.cFoods) {
                    this.totalPrice = this.addNum(this.totalPrice,cFood.price);
                }
            },
            addNum (num1, num2) {
                let sq1,sq2,m;
                try {
                    sq1 = num1.toString().split(".")[1].length;
                }
                catch (e) {
                    sq1 = 0;
                }
                try {
                    sq2 = num2.toString().split(".")[1].length;
                }
                catch (e) {
                    sq2 = 0;
                }
                m = Math.pow(10,Math.max(sq1, sq2));
                return (num1 * m + num2 * m) / m;
            },
            delNum (num1, num2) {
                let sq1,sq2,m;
                try {
                    sq1 = num1.toString().split(".")[1].length;
                }
                catch (e) {
                    sq1 = 0;
                }
                try {
                    sq2 = num2.toString().split(".")[1].length;
                }
                catch (e) {
                    sq2 = 0;
                }
                m = Math.pow(10,Math.max(sq1, sq2));
                return (num1 * m - num2 * m) / m;
            },
            findStore(){

            }
        },
        mounted() {
            console.log("==>Store");
            axios.post('/findStore',{
                userId: this.$store.state.userId
            }).then(res=>{
                // console.log(res);
                this.store = res.data;
                axios.post("/goodList",{
                    userId: this.store.userId
                }).then(res=>{
                    // console.log(res);
                    this.foods = res.data;
                })
            });

            this.cFoods = this.$store.state.cFoods;

        },


        // beforeRouteEnter(to,from,next){
        //     next(vm=>{
        //         if(from.path == '/home'){
        //             axios.post('/findStore',{
        //                 userId: vm.$route.query.userId
        //             }).then(res=>{
        //                 // console.log(res);
        //                 vm.store = res.data;
        //                 axios.post("/goodList",{
        //                     userId: vm.store.userId
        //                 }).then(res=>{
        //                     // console.log(res);
        //                     vm.foods = res.data;
        //                 })
        //             });
        //         }
        //         if(from.path == '/order'){
        //             vm.store = to.params.store;
        //             vm.cFoods = to.params.cFoods;
        //             axios.post("/goodList",{
        //                 userId: vm.store.userId
        //             }).then(res=>{
        //                 // console.log(res);
        //                 vm.foods = res.data;
        //             })
        //         }
        //
        //
        //     });
        // },
    }
</script>

<style scoped>
    #itemTitle{
        width: 100%;
        height: 20px;
        margin: 2px;
        padding: 2px;
        text-align: left;
    }
    #item{
        width: 100%;
        height: 30px;
        margin: 2px;
        padding: 2px;
        text-align: left;
    }
    .btn{
        width: 30px;
    }
</style>